<!-- 更多停车弹出框 -->
<template>
  <div class="dy-panel" v-if="showSecuritySituationMoreLayer">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <div class="dy-panel-item" v-for="(item,index) in moreDataList" @click="clickMoreEvent(item)">
          <div class="t-l"></div>
          <div class="t-r"></div>
          <div class="b-l"></div>
          <div class="b-r"></div>
          <div class="dy-panel-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
          <div class="dy-panel-text">{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
  <SecuritySituationKxtcLayer v-if="showSecuritySituationKxtcLayer" @closeChild="closeChild"></SecuritySituationKxtcLayer>
  <SecuritySituationCstcLayer v-if="showSecuritySituationCstcLayer" @closeChild="closeChild"></SecuritySituationCstcLayer>
  <SecuritySituationDrwhpqsLayer v-if="showSecuritySituationDrwhpqsLayer" @closeChild="closeChild"></SecuritySituationDrwhpqsLayer>
  <SecuritySituationJqrwhpqsLayer v-if="showSecuritySituationJqrwhpqsLayer" @closeChild="closeChild"></SecuritySituationJqrwhpqsLayer>
</template>
<script setup>
  import {ref} from "vue";
  import whpckxtcyjImg from "../../../assets/img/security/whpckxtcyj.png";
import whpccstcyjImg from "../../../assets/img/security/whpccstcyj.png";
import drclbhqsImg from "../../../assets/img/parking_more/当日车流变化趋势.png";
import SecuritySituationCstcLayer from "./securitySituationCstcLayer.vue";
import SecuritySituationKxtcLayer from "./securitySituationKxtcLayer.vue";
import SecuritySituationDrwhpqsLayer from "./securitySituationDrwhpqsLayer.vue";
import SecuritySituationJqrwhpqsLayer from "./securitySituationJqrwhpqsLayer.vue";

  const props = defineProps({
    showSecuritySituationMoreLayer: Boolean
  })
  const emit = defineEmits(['closeMoreLayers','showMoreLayers']);

  const moreDataList = ref([
    {
      title:'危化品车跨线停车预警',
      name:'whpckxtcyj',
      icon: whpckxtcyjImg
    },
    {
      title:'危化品车超时停车预警',
      name:'whpccstcyj',
      icon: whpccstcyjImg
    }
    ,{
      title:'当日危化品车流趋势',
      name:'drwhpclbhqs',
      icon: drclbhqsImg
    }
    ,{
      title:'近7日危化品车流趋势',
      name:'jqrwhpclbhqs',
      icon: drclbhqsImg
    }
  ])
  const showSecuritySituationKxtcLayer = ref(false);//显示
  const showSecuritySituationCstcLayer = ref(false);//显示
  const showSecuritySituationDrwhpqsLayer = ref(false);//显示
  const showSecuritySituationJqrwhpqsLayer = ref(false);//显示
  const closeCurrent = function (){
    emit("closeMoreLayers",'securitySituation');
  }
  const showCurrent = function (){
    emit("showMoreLayers",'securitySituation');
  }
  
  const clickMoreEvent = function (item){
    closeCurrent();
    if (item.name === 'whpckxtcyj'){
      showSecuritySituationKxtcLayer.value = true;
    }
    else if (item.name === 'whpccstcyj'){
      showSecuritySituationCstcLayer.value = true;
    }
    else if (item.name === 'drwhpclbhqs'){
      showSecuritySituationDrwhpqsLayer.value = true;
    }
    else if (item.name === 'jqrwhpclbhqs'){
      showSecuritySituationJqrwhpqsLayer.value = true;
    }
  }

  const closeChild = function (){
    showCurrent()
    showSecuritySituationKxtcLayer.value = false;
    showSecuritySituationCstcLayer.value = false;
    showSecuritySituationDrwhpqsLayer.value = false;
    showSecuritySituationJqrwhpqsLayer.value = false;
  }

</script>
<style scoped>
.dy-panel-item{
  width: 28% !important;
}
</style>
